import { memo, useState, lazy, Suspense, useEffect, useRef, useMemo } from "react"
import { Button, Progress, message } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import { removeTaskArray } from '../../../../store/modules/taskReducer'
import LdListItem from '../../../../components/LdListItem'
import bus from "../../../../utils/eventBus"
import './index.scss'
import emptyPng from '../../../../assets/task/empty.png'
const Queue = () => {
    const dispatch = useDispatch()
    const { id } = useSelector((state: any) => state.userReducer.userInfo)
    const taskArray = useSelector((state: any) => state.taskReducer.printTask)
    const paperParams = useRef<any[]>([
        {
            label: "密级",
            value: "",
            model: "fileLevelText",
        },
        { label: "份数", value: "", model: "partNum" },
        { label: "纸张", value: "", model: "pageSizeText" },
        { label: "页数", value: "", model: "totalPage" },
        { label: "方式", value: "", model: "printLayerText" },
        { label: "色彩", value: "", model: "printColorText" },
    ])
    const dataItem = useRef<any>(null)
    const abortPrintFinished = (data: any) => {
        if (data.code === 200) {
            dispatch(removeTaskArray(dataItem.current.taskId))
        } else {
            message.error(data.msg);
        }
    }
    const handleCancel = (item: any) => {
        window.chromePro.abortPrint(
            JSON.stringify({
                userId: id,
                taskId: item.taskId,
                printerName: item.printerName,
            })
        );
        dataItem.current = item;
    }
    useEffect(() => {
        bus.addListener("abortPrintFinished", abortPrintFinished);
    }, [])
    useEffect(() => {
        if (taskArray.length === 0) {
            bus.emit("setItemCountDown");
        } else {
            bus.emit("stopCountDown");
        }
    }, [taskArray])
    useEffect(() => {
        return () => {
            bus.removeListener("abortPrintFinished", abortPrintFinished);
        }
    }, [])
    return (
        <>
            <div className="task-box">
                <div className="w100 h100">
                    <div className="task-list-container">
                        <div className="task-list">
                            {
                                taskArray.length ?
                                    <>
                                        {
                                            taskArray.map((item: any, index: number) => {
                                                return (
                                                    <>
                                                        <LdListItem
                                                            paperParams={paperParams.current}
                                                            mode={'print'}
                                                            taskItem={item}
                                                            key={item.taskId}
                                                            index={index + 1}
                                                        >
                                                            <div slot="progress">
                                                                <Progress strokeColor={{ "0": '#108ee9', "100%": '#87d068' }} percent={item.progress} showInfo={false}></Progress>
                                                            </div>
                                                            <div slot="top">
                                                                <div className="doc-count">
                                                                    {
                                                                        item.progress ?
                                                                            <div>
                                                                                <span>
                                                                                    第<span style={{ color: '#23b4ff' }}>{item.currentPage}</span
                                                                                    >页/共{item.totalPage}页</span
                                                                                >
                                                                                <span style={{ marginLeft: '10px' }}
                                                                                >第<span style={{ color: '#23b4ff' }}>{item.currentPartNum}</span
                                                                                >份/共{item.partNum}份</span
                                                                                >
                                                                            </div> :
                                                                            <span >等待中...</span>
                                                                    }
                                                                </div>
                                                            </div>
                                                            {
                                                                !item.progress ?
                                                                    <Button onClick={() => handleCancel(item)} danger>取消</Button> : null

                                                            }
                                                        </LdListItem>
                                                    </>
                                                )
                                            })
                                        }
                                    </>
                                    :
                                    <div className="empty-content flex-center align-center">
                                        <div>
                                            <img draggable={false} alt="" src={emptyPng} width="238px" />
                                            <div
                                                style={{
                                                    width: '100%',
                                                    textAlign: 'center',
                                                    color: 'rgba(137, 147, 154, 100)',
                                                    fontSize: '14px'
                                                }}
                                                className="mt-10"
                                            >
                                                暂无打印任务队列
                                            </div>
                                        </div>
                                    </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}
export default memo(Queue)